<template>
    <input type="text" v-model="name">
    {{name}}
    {{person}}
</template>

<script>
    import {reactive, toRef, toRefs, shallowReactive,shallowRef} from 'vue'
    export default {
        name : "Demo",
        setup(){
            // 用浅层次的响应式，意思是只绑定第一层。
            const person = shallowReactive({
                name:'zhangsan',
                age:18,
                job:{
                    name:"engineer",
                    skill:"vue",
                }
            })
            // 检测改变失败.shallowRef不能处理对象
            // let x = shallowRef({
            //     y:0
            // })
            return {
                // x,
                ...toRefs(person),
                person,
            }
        },
    }
</script>

<style scoped>

</style>